<template>
  <transition name="slideFromRight">
    <div class="fooddetail" v-show="showFlag" ref="fooddetail">
      <div class="content">
        <div class="image-header">
          <img :src="food.image">
          <div class="back" @click="hide">
            <i class="icon-arrow_lift"></i>
          </div>
        </div>
        <div class="food-content">
          <div class="name">{{food.name}}</div>
          <div class="extra">
            <span class="sellCount">月售{{food.sellCount}}份</span><span class="rating">好评率{{food.rating}}%</span>
          </div>
          <div class="price">
            <span class="now">￥{{food.price}}</span>
            <span class="old" v-show="food.oldPrice">￥{{food.oldPrice}}</span>
          </div>
          <div class="cartcontrol-wrapper">
            <cartcontrol :food="food"></cartcontrol>
          </div>
          <transition name="fade">
            <div class="addToCart" v-show="!food.count || food.count===0" @click.stop.prevent="addFirst">加入购物车</div>
          </transition>
        </div>
        <div class="food-desc" v-show="food.info">
          <div class="title">商品介绍</div>
          <div class="text">{{food.info}}</div>
        </div>
        <div class="food-ratings">
          <div class="title">商品评价</div>
          <ratingselect :ratings="food.ratings" :select-type="selectType" :select-text="selectText"
                        :only-content="onlyContent" @changeselectType="getselectType"
                        @changeSwitch="getSwitch"></ratingselect>
          <div class="ratings-wrapper">
            <ul>
              <li class="rating-item border-1px" v-for="rating in food.ratings"
                  v-show="needShow(rating.rateType,rating.text)">
                <div class="time">{{rating.rateTime}}</div>
                <div class="user">
                  <span class="name">{{rating.username}}</span>
                  <div class="avatar">
                    <img :src="rating.avatar" width="12" height="12">
                  </div>
                </div>
                <div class="text">
                  <i
                    :class="{'icon-thumb_up':rating.rateType===0,'icon-thumb_down':rating.rateType===1}"></i>{{rating.text}}

                </div>
              </li>
            </ul>
            <div class="no-rating" v-show="!food.ratings || !food.ratings.length">暂无评论</div>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script type="text/ecmascript-6">
  import BScroll from 'better-scroll'
  import Vue from 'vue'
  import cartcontrol from '../../components/cartcontrol/cartcontrol.vue'
  import ratingselect from '../ratingselect/ratingselect.vue'
  const ALL = 2
  /*const Negative = 1
   const Positive = 0*/
  export default{
    props: {
      food: {
        type: Object
      }
    },
    data(){
      return {
        showFlag: false,
        selectType: ALL,
        selectText: {
          all: '全部',
          positive: '推荐',
          negative: '吐槽'
        },
        onlyContent: true
      }
    },
    components: {
      cartcontrol,
      ratingselect
    },
    methods: {
      show(){
        this.showFlag = true
        this.selectType = ALL
        this.onlyContent = true
        this.$nextTick(() => {
          if (!this.scroll) {
            this.scroll = new BScroll(this.$refs.fooddetail, {
              click: true
            })
          } else {
            this.scroll.refresh()
          }
        })
      },
      hide(){
        this.showFlag = false
      },
      addFirst(){
        if (!event._constructed) {
          return
        }
        Vue.set(this.food, 'count', 1)
      },
      getselectType(value){
        this.selectType = value
      },
      getSwitch(value){
        this.onlyContent = value
      },
      needShow(type, text){
        if (this.onlyContent && !text) {
          return false
        }
        if (this.selectType === ALL) {
          this.$nextTick(() => {
            this.scroll.refresh()
          })
          return true
        } else {
          this.$nextTick(() => {
            this.scroll.refresh()
          })
          return type === this.selectType
        }
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../common/stylus/mixin.styl"
  .fooddetail
    position: fixed
    top: 0
    bottom: 48px
    width: 100%
    z-index: 30
    background: #fff
    &.slideFromRight-enter-active, &.slideFromRight-leave-active
      transition: all 0.2s linear
    &.slideFromRight-enter, &.slideFromRight-leave-active
      transform: translate3d(100%, 0, 0)
    .content
      background: #f3f5f7
      .image-header
        position: relative
        padding-top: 100%
        width: 100%
        height: 0
        img
          position: absolute
          top: 0
          left: 0
          width: 100%
          height: 100%
        .back
          position: absolute
          top: 10px
          left: 10px
          padding: 10px
          border-radius: 50%
          background: rgba(7, 17, 27, 0.4)
          .icon-arrow_lift
            font-size: 20px
            color: #fff
      .food-content
        position: relative
        padding: 18px
        border-bottom: 1px solid rgba(7, 17, 27, 0.1)
        background: #fff
        .name
          margin-bottom: 8px
          line-height: 14px
          color: rgb(7, 17, 27)
          font-weight: 700
          font-size: 14px
        .extra
          height: 10px
          line-height: 10px
          color: rgb(147, 153, 159)
          font-size: 10px
          .sellCount
            margin-right: 12px
        .price
          margin-top: 18px
          line-height: 24px
          font-size: 0
          .now
            margin-right: 12px
            color: rgb(240, 20, 20)
            font-weight: 700
            font-size: 14px
          .old
            text-decoration: line-through
            color: rgb(147, 153, 159)
            font-size: 10px
        .cartcontrol-wrapper
          position: absolute
          right: 18px
          bottom: 12px
        .addToCart
          position: absolute
          right: 18px
          bottom: 18px
          padding: 6px 12px
          border-radius: 12px
          background: rgb(0, 160, 220)
          color: #fff
          line-height: 12px
          font-size: 10px
          &.fade-enter-active, &.fade-leave-active
            transition: all 0.2s
          &.fade-enter, &.fade-leave-active
            opacity: 0
      .food-desc
        margin-top: 16px
        padding: 18px 26px 18px 18px
        border-top: 1px solid rgba(7, 17, 27, 0.1)
        border-bottom: 1px solid rgba(7, 17, 27, 0.1)
        background: #fff
        .title
          margin-bottom: 6px
          color: rgb(7, 17, 27)
          font-size: 14px
        .text
          line-height: 24px
          color: rgb(77, 85, 93)
          font-size: 12px
      .food-ratings
        margin-top: 18px
        margin-bottom: 18px
        background: #fff
        .title
          padding: 18px 0 0 18px
          color: rgb(7, 17, 27)
          font-size: 14px
        .ratings-wrapper
          padding: 0 18px
          .rating-item
            position: relative
            padding: 16px 0
            border-1px(rgba(7, 17, 27, 0.1))
            .time
              margin-bottom: 6px
              color: rgb(147, 153, 159)
              line-height: 12px
              font-size: 10px
            .user
              position: absolute
              right: 0
              top: 16px
              font-size: 0
              .name
                display: inline-block
                margin-right: 6px
                color: rgb(147, 153, 159)
                line-height: 12px
                font-size: 10px
              .avatar
                display: inline-block
                vertical-align: top
            .text
              color: rgb(7, 17, 27)
              line-height: 16px
              font-size: 12px
              .icon-thumb_down
                margin-right: 4px
                color: rgb(147, 153, 159)
              .icon-thumb_up
                margin-right: 4px
                color: rgb(0, 160, 220)
          .no-rating
            padding: 16px 0
            color: rgb(147, 153, 159)
            font-size: 12px
</style>
